<style>
    a {
        cursor: pointer;
        background: #F5F5F5;
    }

    a:hover {
        border-color: #BBB5B5;
    }

    .sku_btns a {
        background: #1EACEA;
        color: #FFFFFF;
        padding: 5px 10px;
    }

    input {
        outline: none;
    }

    span {
        display: inline-block;
    }
    .sku_modellist{ display: block; padding-bottom: 20px; position: relative; margin-left: 110px;}

    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }
    .sku_btns a {
        background: #1EACEA;
        color: #FFFFFF;
        padding: 5px 10px;
    }
    /****商品规格***/

    .sku_guige {
        margin-top: 20px;
        display: none;
    }

    .sku_modellist_title {
        font-size: 16px;
        margin-top: 20px;
    }
    .sku_list {
        font-size: 0;
    }

    .sku_item {
        margin-top: 20px;
        padding: 7px 0px;
    }

    .sku_list a {
        padding: 7px 20px;
        border: 1px solid #d7d7d7;
        border-radius: 5px;
    }

    .sku_list span {
        position: relative;
        font-size: 16px;
        margin-right: 20px;
    }

    .sku_list .itemactive {
        background: #2AC845;
        color: #fff;
    }

    .sku_list .sku_item_close {
        display: none;
        position: absolute;
        right: -10px;
        top: -15px;
        height: 20px;
        width: 20px;
        background: rgba(0, 0, 0, .5);
        color: #FFF;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-style: normal;
        cursor: pointer;
    }


</style>
<form class="layui-form" method="post">
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">任务平台</label>
        <div class="layui-inline">
            <select name="site" lay-verify="required"  lay-filter="pintai">
                <option value="">请选择抢购任务平台</option>
                <volist name="sitedao" id="siteval">
                    <option value="{$siteval.site_id}">{$siteval.site_name}</option>
                </volist>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">商品链接</label>
        <div class="layui-input-block">
            <input type="text"  name="goodurl" placeholder="请选任务平台" id="selectsearch" class="layui-input layui-input80" >
            <img src="__PUBLIC__/Images/help.gif" class="tips_img" title="该链接是商品链接用于匹配平台任务">
        </div>
    </div>
    <div class="layui-form-item" style="padding-top: 2%">
        <label class="layui-form-label">匹配任务</label>
        <div class="layui-input-inline"  id="task" >
            <select name="teskurl" lay-verify="required" lay-filter="task">
                <option value="">请输入商品url</option>
            </select>
        </div>
    </div>
    <div class="sku_guige">
        <div class="layui-form-label">商品规格</div>
        <!---下列存放动态生成的商品规格：颜色，尺码等-->
        <div class="sku_modellist">
        </div>
    </div>
    <div class="sku_table"></div>
    <!---此处为动态生成的表格内容-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="teamaddtask">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    //定义数组，在服务端返回的数据也以该格式返回：Array[{Object},{...}]
    form.render();
    var pintai='';
    var goodsurl='';
    var goodsdata='';
    form.on('select(pintai)', function(data){
        pintai=data.value;
        $('#selectsearch').val('');
        $('#task select').html('<option value="">请输入商品url</option>');
        attrdata='';
        goodsurl='';
        form.render('select')
    });
    $('#selectsearch').blur(function(){
        console.log("aaaa");
        if(goodsurl == $('#selectsearch').val()){

        }else{
            attrdata='';
            $(".sku_modellist").html("");
            goodsurl=$('#selectsearch').val().trim();
            var url = "{:U('Team/searchtask')}";
            $.post(url,{'tyep':pintai,goodsurl:goodsurl},function(data){
                if(data.code == '4001'){
                    $('#task select').html('<option value="">没有匹配任务</option>');
                }else if(data.code == '101'){
                    goodsdata=data.data
                    $html= '<option value="">请选择匹配任务</option>';
                    layui.each(data.data, function (k, v) {
                        $html+= '<option value="'+v.id+'">'+v.url+'</option>';
                    });
                   // console.log($html);
                    $('#task select').html($html);
                }
                form.render('select');
            });
            attrdata=''
        }
    });
    form.on('select(task)', function(data){
        layui.each(goodsdata, function (k, v) {
            if(v.id == data.value){
                $attrhtml='<div><input name="sortnum" type="checkbox" id="selected-all"><i>选择所有</i></div>'
                if(v.attr != 0){
                    attrdata=v.attr;
                    $(".sku_modellist").html("");
                    var arrs = [];
                    layui.each(v.attr, function (k, v) {
                        var text='';
                        var dataid='';
                        layui.each(sizes,function(tk,tv){
                            if(tv == k){
                                text=tk;
                                dataid=tv;
                            }
                        })

                        var arr = attrdata[k] || [];
                        attrdata[k] = arr;
                        //创建规格
                        new Skumodel(text, arr, dataid)
                        arrs.push(text)
                        //根据arrs数据判断出是否显示表格同时清空表格
                        if(arrs.length) {
                            $(".sku_guige").show()
                            $(".sku_container .itemactive").toggleClass("itemactive")
                        } else {
                            $(".sku_guige").hide()
                        }

                    });
                }
                $('#allattr').html($attrhtml);
            }
        });
    });
    $('input').iCheck({
        checkboxClass: 'icheckbox_flat-green'
    });
    form.on('submit(teamaddtask)', function(data){
        var fromdate = data.field;
        var createteamattr={};
        $(".sku_modellist .sku_container").each(function() {
            var attrtext=$(this).find('.sku_modellist_title').html();
            attrtext=attrtext.split("：");

            attetext='';
            layui.each(sizes,function(tk,tv){
                console.log(tk);
                console.log(attrtext[0]);
                if(tk == attrtext[0]){
                    attetext=tv;
                }
            });
            createteamattr[attetext]={keys:[],vals:[]}
           $(this).find('.itemactive').each(function(){
               createteamattr[attetext]['keys'].push($(this).text());
               createteamattr[attetext]['vals'].push($(this).attr("data-id"));
           });
        })

        fromdate.goodsattr=createteamattr;
        var url = "__SELF__";
        layer.confirm('任务一旦发布不能修改执行完毕后才能再次发布该商品任务是否发布', {
            icon: 3,
            skin: 'layer-ext-moon',
            btn: ['确认','取消']
        }, function(){
            $.post(url,fromdate,function(data){
                if(data.code == '4001'){
                    layer.msg(data.msg,{icon: 5});
                    return;
                }else if(data.code == '101'){
                    layer.msg(data.msg, {
                        icon: 6,
                        time: 2000
                    }, function(){
                       // location.reload();
                    });
                }
            });
        });

        return false;
    });


</script>
<script>
    var attrdata='';
    var sizes = {
        "颜色": 'allColor',
        "尺码": 'allSize'
    }
    /***
     * Skumodel 为生成规格类
     * title为规格名字  string  例：尺码
     * times将要生成的规格项目  Array  例如：尺码：xxl,xl,m,s
     * dataid为产生型号的标识最外层元素上的id   string
     * **/
    var Skumodel = function(title, items, dataid) {
        //最外层div+标题栏
        this.title = title || "aaa";
        this.items = items || [];
        this.container = $('<div class="sku_container" id="' + dataid + '"><div class="sku_modellist_title">' + this.title + '：</div></div>');
        //模型列表
        this.skumodels = $('<div class="sku_models"></div>');
        this.skumlist = $('<div class="sku_list"></div>')

        this.init(this.items)
    }
    Skumodel.prototype = {
        //初始化显示组件
        init: function(items) {
            var html = ""
            layui.each(items,function(itemkey,itemval){
                html += '<span class="sku_item"><a data-id="' + itemkey + '">' + itemval + '</a></span>';
            });
            //获取所有生成按钮
            this.skumlist.append($(html))
            this.skumodels.append(this.skumlist)
            this.container.append(this.skumodels)
            $(".sku_modellist").append(this.container);
            this.bindEvent()
        },
        bindEvent: function() {
            this.activeItem();
        },
        //子元素是否选中事件
        activeItem: function() {
            this.skumlist.on("click", "a", function() {
                $(this).toggleClass("itemactive");
            });
        }
    };
</script>